<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>商城首页</title>
    <link rel="stylesheet" type="text/css" href="${basePath}/public/css/common.css">
    <script type="text/javascript" src="${basePath}/public/js/PCASClass.js"  ></script>
    <script type="text/javascript" src="${basePath}/public/js/jquery.min.js"  ></script>
    <script type="text/javascript">

        function initData(){
            let num=0;
            let nodes=document.querySelectorAll(".totalPrice")

            for(let i=0;i<nodes.length;i++){
                num+=Number(nodes[i].innerHTML)
            }
            document.querySelector("#goodsAmount").innerHTML=num;
            document.querySelector("#totalAmount").innerHTML=num;
        }

        $(function () {
            initData();
        })

      window.onload=function(){
          //初始化省市区
          var mypcas = new PCAS("province,所属省份","city,所属城市","area,所属地区");
      }

        function select() {
            var name = $("#a").val();
            window.location.href="${basePath}/home/homepage/like?name="+name;
        }
      function btnSubmit() {

          $.ajax({
              url:"${basePath}/home/ShopOrderGoods/addShopOrderGoods",
              type:"post",
              data:{
                  "accept_name":$("#accept_name").val(),
                  "province":$("#province").val(),
                  "city":$("#city").val(),
                  "area":$("#area").val(),
                  "address":$("#address").val(),
                  "email":$("#email").val(),
                  "post_code":$("#post_code").val(),
                  "message":$("#message").val(),
                  "totalAmount":$("#totalAmount").text(),
                  "telphone":$("#mobile").val(),
                  "goodsId":$("#goodsId").val(),
                  "goodsImg":$("#goodsImg").attr("src"),
                  "name":$("#goodsName").text(),
                  "totalNum":$("#totalNum").text(),
                  "goodsPrice":$("label#totalAmount").text(),
                  "totalPrice":$("label#totalPrice").text(),
                  "goodsNumber":$("#totalNum").text(),
                  "param":2
      },
              success:function (result) {
                  if (result.msg==3){
                      window.location.href="${basePath}/home/cart/EmptyCart";
                  }else {
                      alert(result.msg)
                  }
              }
          })
      }

    </script>
</head>
<body>
<div class="top-header">
    <div class="section">
        <div class="top-header-left f-left">
            <a href="#">LOGO</a>
        </div>
        <div class="top-header-right f-right">
            <c:choose>
                <c:when test="${empty user}">
                    <a href="${basePath}/home/vipUser/toLogin">登录</a>
                    <a href="${basePath}/home/vipUser/toRegisterVip">注册</a>
                    <a href="${basePath}/admin/adminUser/toLogin">后台</a>
                </c:when>
                <c:otherwise>
                    <a href="#">欢迎你!<W style="color: bisque;font-weight: bold; font-family: 微软雅黑; font-size: 20px;">${user.username}</W></a>
                    <a href="${basePath}/admin/adminUser/toLogin">后台</a>
                    <a href="${basePath}/home/vipUser/write">注销</a>
                </c:otherwise>
            </c:choose>
        </div>
    </div>
</div>

<div class="section nav-header">
    <ul class="nav-menus f-left">
        <li><a href="${basePath}/home/homepage/index">首页</a></li>
        <li ><a href="${basePath}/home/homepage/toProductList"  >产品列表</a></li>
        <li><a href="${basePath}/home/cart" class="active">购物车</a></li>
        <li><a href="${basePath}/home/vipUser/index" >会员中心</a></li>
        <li><a href="${basePath}/home/News/toNews">新闻资讯</a></li>
        <li><a href="${basePath}/home/pay/contact">联系我们</a></li>
    </ul>
    <div class="f-right nav-right">
        <input type="text" class="seacher-input f-left" placeholder="输入关键字">
        <a class="seacher-but  f-left" onclick="select()">搜索</a>
    </div>
</div>

<div class="section">
    <div class="cart-head">
        <h2>我的购物车</h2>
        <div class="cart-setp">
            <ul>
                <li class="first active">
                    <div class="progress">
                        <span>1</span>
                        放进购物车
                    </div>
                </li>
                <li class="active">
                    <div class="progress ">
                        <span>2</span>
                        填写订单信息
                    </div>
                </li>
                <li class="last">
                    <div class="progress">
                        <span>3</span>
                        支付/确认订单
                    </div>
                </li>
            </ul>
        </div>
    </div>

</div>

<div class="section">
   <div class="cart-box">
       <h2 class="slide-tit">
           <span>1、收货地址</span>
       </h2>
   </div>

    <div class="form-box address-info">

        <dl class="form-group">
            <dt>收货人姓名：</dt>
            <dd>
                <input name="book_id" id="book_id" type="hidden" value="0">
                <input name="accept_name" id="accept_name" type="text" class="input Validform_error" value="" datatype="s2-20" sucmsg=" " nullmsg="请填写信息！">
                <span class="Validform_checktip Validform_wrong">请填写信息！</span>
            </dd>
        </dl>
        <dl class="form-group">
            <dt>所属地区：</dt>
            <dd>
            <select id="province" name="province" class="select"><option value="">所属省份</option></select>
            <select id="city" name="city" class="select"><option value="">所属城市</option><option value="市辖县">市辖县</option></select>
            <select id="area" name="area" class="select" datatype="*" sucmsg=" "><option value="">所属地区</option></select>
                <span class="Validform_checktip Validform_right"> </span>
            </dd>
        </dl>
        <dl class="form-group">
            <dt>详细地址：</dt>
            <dd>
                <input name="address" id="address" type="text" class="input Validform_error" value="" datatype="*2-100" sucmsg=" " nullmsg="请填写信息！">
                <span class="Validform_checktip Validform_wrong">请填写信息！</span>
            </dd>
        </dl>
        <dl class="form-group">
            <dt>手机号码：</dt>
            <dd>
                <input name="mobile" id="mobile" type="text" class="input" value="" datatype="m" sucmsg=" ">
                <span class="Validform_checktip">*收货人的手机号码</span>
            </dd>
        </dl>
        <dl class="form-group">
            <dt>电子邮箱：</dt>
            <dd>
                <input name="email" id="email" type="text" class="input" value="">
                <span class="Validform_checktip">方便通知订单状态，非必填</span>
            </dd>
        </dl>
        <dl class="form-group">
            <dt>邮政编码：</dt>
            <dd>
                <input name="post_code" id="post_code" type="txt" class="input code" value="">
                <span class="Validform_checktip">所在地区的邮政编码，非必填</span>
            </dd>
        </dl>
    </div>

    <h2 class="slide-tit">
        <span>2、商品清单</span>
    </h2>
    <c:forEach items="${list}" var="m">
    <table width="100%" align="center" class="cart-table" border="0" cellspacing="0" cellpadding="8">
        <input type="hidden"  id="goodsId" value="${m.goodsId}">

        <tbody>
        <tr>

            <th align="left" colspan="2">商品信息</th>
            <th width="84" align="left">单价</th>
            <th width="104" align="center">数量</th>
            <th width="104" align="left">金额(元)</th>
        </tr>
        <tr>
            <td width="68">
                <a target="_blank" href="#">
                    <img src="${basePath}/public/images${m.goodsImg}" id="goodsImg" class="img">
                </a>
            </td>
            <td>
                <a target="_blank" href="#" ><span id="goodsName">${m.goodsName}<span/></a>
                <p class="stxt"></p>
            </td>
            <td class="amountCount" id="goodsPrice">
                    ${m.sellPrice}
            </td>
            <td align="center">
                <div class="buy-box">
                    <span class="totalNum" id="totalNum">
                        1
                    </span>
                </div>
            </td>
            <td>
                <span class="red">
                    ￥<label name="amountCount" id="totalPrice" class="totalPrice">${m.sellPrice }</label>
                </span>

            </td>
        </tr>
        </tbody>
    </table>

    </c:forEach>
    <h2 class="slide-tit">
        <span>3、结算信息</span>
    </h2>

    <div class="buy-foot clearfix">
        <div class="left-box">
            <dl>
                <dt>订单备注(100字符以内)</dt>
                <dd>
                    <textarea name="message" id="message" class="input" style="height:35px;"></textarea>
                </dd>
            </dl>
        </div>
        <div class="right-box">
            <p>
                商品 <label id="totalQuantity">${fn:length(list)}</label> 件&nbsp;&nbsp;&nbsp;&nbsp;
                商品金额：￥<label id="goodsAmount" class="price">${totalPrice}</label> 元&nbsp;&nbsp;&nbsp;&nbsp;
            </p>
            <p class="txt-box">
                应付总金额：￥<label id="totalAmount" class="price">${totalPrice}</label>
            </p>
            <p class="btn-box">
                <a class="btn button" href="${basePath}/home/cart">返回购物车</a>
                <a id="btnSubmit" name="btnSubmit" class="btn submit" onclick="btnSubmit()">确认提交</a>
            </p>
        </div>
    </div>

</div>
</body>
</html>